<template>
  <div style="background-color: #fff;">
    <a-card
    :bordered="false"
    style="height: 85px;"
    v-if="['analysis','external'].includes(model)"
    >
      <a-button
       type="dashed"
       block
       style="margin-bottom: 5px;"
       @click="$emit('dataClick')"
      >
      +上传{{model==='external'?'外部数据':'数据集'}}
      </a-button>
    </a-card>
    <a-card
    :bordered="false"
    :headStyle="{height:'35px',display: 'flex',fontWeight: 700,minHeight: '35px'}"
    :bodyStyle="{padding:0}"
    >
    <!-- :title="model==='choose'? '选择数据':'已有报文组'" -->

      <a-table
        :columns="columns"
        :data-source="dataList"
        rowKey="id"
        :bordered="true"
        :pagination="false"
        :customRow="(record) => ({
          on: {
            click: () => {
              $emit('dataClick',record.id)
            }
          }
        })"
        :rowClassName="(record) => {
          if(model == 'target' && !record.info.target && !record.info.analysis)
            return 'disabled'
          return record.id == selectId ? 'selected' : 'normal'
        }"
        :scroll="{y:`calc(100vh${model==='analysis'?' - 85px':''} - 82px)`}"
      >
<!--        <span
          slot="dataName"
          style="white-space: nowrap"
          slot-scope="name"
        >
          {{name}}
        </span> -->
        <span slot="dataInfo"
        @click.stop
        slot-scope="info,item">
          <a-tag
            v-if="['target','analysis'].includes(model)"
            :color="info[model]?'green':'red'"
            :title="tagInfo.title"
            @click="tagClick(item.id,info)"
          >
            {{info[model]? tagInfo.true:tagInfo.false}}
          </a-tag>
        </span>
        <a-popconfirm
          slot="action" slot-scope="item"
          ok-text="删除"
          okType="danger"
          cancel-text="取消"
          @confirm="delData(item.id)"
          @cancel="()=>{}"
        >
          <div slot="title" >
            确认要删除{{model==='external'?'外部数据':'报文组'}}{{item.name}}?<br>该操作不可逆,请谨慎执行
          </div>
          <a-button
          size="small"
          :style="{width:'100%'}"
          :loading="item.info.delLoading"
          @click.stop="()=>{}" type="link">
            Delete
          </a-button>
        </a-popconfirm>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { tagDict } from '@/components/DataGroup/tagDict'
export default{
  name:'DataGroup',
  data(){
    return{
      tagInfo:{
      },
      // scrollY:500,
      columns:[
        {
          title: this.model==='external'?'外部数据':'报文组',
          dataIndex: 'name',
          ellipsis:true,
        },/* {
          title: '描述',
          dataIndex: 'describe',
          ellipsis:true,
        }, */{
          title: '上传时间',
          dataIndex: 'time',
          ellipsis:true,
          align:'right',
        },{
          title: '征信报告数量',
          dataIndex: 'total',
          ellipsis:true,
          align:'right',
        },{
          title: '状态',
          dataIndex: 'info',
          scopedSlots: {customRender: 'dataInfo'},//插槽
          ellipsis:true,
          align:'right',
        }
      ],
    }
  },
  props:{
    dataList:{
      type:Array,
      default:() => []
    },
    model:{
      type:String,
      required: true,
    },
    selectId:{
      // type:Number || null,
      default:undefined
    }
  },
  created() {
    this.tagInfo = tagDict[this.model]
    console.log(this.tagInfo,this.model)
    if(['analysis','external'].includes(this.model))
      this.columns.push(
        {
          title: 'Action',
          scopedSlots: { customRender: 'action' },
          align:'center'
        },
      )
  },
  methods:{
    tagClick(id,info){
      const {model} = this
      if(model==='analysis' && !info[model]){
        this.$emit("tagClick",id)
      }
    },
    delData(id){
      if(id)
        this.$emit("delData",id)
    }
  }
}
</script>
<!-- 
<style scoped lang="less">
@Bottom: 25px;
@btnBottom: 5px;
    .selectBtn{
      color: #0f89ed !important;
      background-color: #fff;
      border-color: #0f89ed;
      border-width: 2px;
      font-weight: 700;
    }
  /* .existingData{
    position: relative;
    z-index: 2;
    display: flex;
    margin-bottom: @Bottom;
    .dataBtn{
      // margin-bottom: @btnBottom;
      flex: 1;
      width: 0;
      overflow: hidden;
      padding:0 !important;
      position: relative;z-index:2;
      transition: all .5s;
    }
    
    .ant-tag{
      height: calc(100%);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;z-index:2;
    }
    .ant-progress{
      position: absolute;
      z-index: 1;
      left: 0;
      bottom: 0;
      transform: translate(0,100%);
      &-enter-active, &-leave-active {
        transition: all .3s;
      }
      &-enter, &-leave-to {
        transform: translate(0,0);
      }
    }

  }*/
</style>
 -->